在響應式網頁設計中，JavaScript 不僅能增強互動性，還能動態調整佈局，利用 JavaScript 的進階技巧進行響應式設計，例如檢測螢幕尺寸、監聽裝置旋轉，並根據螢幕寬度或裝置類型動態改變網頁內容。

1. 根據螢幕尺寸調整內容

使用 JavaScript，我們可以偵測視口大小並動態更改頁面元素，確保網頁在各裝置上都能提供良好體驗。例如，在螢幕寬度較小的手機上隱藏部分次要內容，以便專注於主要資訊；而在桌機上可以顯示完整資訊。

監聽視口變化：透過監聽視口大小的變化，我們可以在使用者縮放或旋轉裝置時，及時調整頁面佈局。
2. 動態載入內容與資源

為了提高加載效率，我們可以在 JavaScript 中根據裝置特性動態載入資源。這在響應式圖片和影片的應用中尤其實用。根據螢幕尺寸載入不同解析度的圖片，減少不必要的流量消耗和載入時間，提高用戶體驗。

3. 建立裝置偵測功能

我們可以使用 JavaScript 偵測裝置類型（如桌機、平板或手機），並根據裝置自動適配頁面。這有助於調整觸控和鼠標的互動，讓每種裝置的操作體驗更加順暢。例如，對於觸控螢幕裝置，可以設計更大的按鈕或滑動手勢操作。

4. 實現條件式的排版變化

JavaScript 可以根據視口大小動態調整字體、間距、顏色等樣式，提升響應式字體的靈活性。這種條件式排版變化在螢幕尺寸或裝置類型變更時尤其重要，能夠確保文字和內容在各種情境下都保持易讀性和美觀度。

5. 偵測裝置旋轉與方向

在手機和平板裝置上，方向的切換會影響內容的顯示。我們可以利用 JavaScript 偵測裝置的方向變化（如從橫向切換為縱向），自動調整佈局和文字大小，確保頁面在不同方向上都能提供良好的視覺效果。